<template>
  <div>
    <div class="header">
      <span>购物车</span>
      <div>
        <i class="iconfont icon-lingjuanzhongxin"></i>
        <p>领劵</p>
      </div>
    </div>
    <div class="tips">
      <span>·30天无忧退货</span>
      <span>·48小时快速退款</span>
      <span>·满99元免邮费</span>
    </div>

    <!-- 购物车空空 -->
    <div class="cartClear" v-show="!showShopList">
      <i class="iconfont icon-gouwuchetianjia"></i>
      <p>去添加点什么吧</p>
    </div>

    <div v-show="showShopList" class="cart">
      <!-- <h4>全部商品</h4> -->
      <div class="cart-main">
        <!-- <div class="cart-th">
          <div class="cart-th1">全部</div>
          <div class="cart-th2">商品</div>
          <div class="cart-th4">数量</div>
          <div class="cart-th5">价格（元）</div>
          <div class="cart-th6">操作</div>
        </div> -->
        <div class="cart-body">
          <ul
            class="cart-list"
            :key="shop.id"
            v-for="shop in cartInfo.cartInfoList"
          >
            <li class="cart-list-con1">
              <input
                type="checkbox"
                @change="handleChecked($event, shop.skuId)"
                name="chk_list"
                :checked="shop.isChecked == 1"
              />
            </li>
            <li class="cart-list-con2">
              <img :src="shop.imgUrl" />
              <div class="item-msg">{{ shop.skuName }}</div>
            </li>

            <li class="cart-list-con5">
              <a href="javascript:void(0)" class="mins" @click="minus(shop)"
                >-</a
              >
              <input
                autocomplete="off"
                type="text"
                :value="shop.skuNum"
                @input="handleInput($event, shop)"
                minnum="1"
                class="itxt"
              />
              <a href="javascript:void(0)" class="plus" @click="add(shop)">+</a>
            </li>
            <li class="cart-list-con6">
              <span class="sum">￥{{ shop.skuNum * shop.skuPrice }}</span>
            </li>
            <li class="cart-list-con7">
              <a class="sindelet" @click="deleteItem(shop)">删除</a>
              <br />
            </li>
          </ul>
        </div>
      </div>
      <div class="cart-tool">
        <div class="select-all">
          <input
            @change="handleCheckAll"
            class="chooseAll"
            type="checkbox"
            :checked="isAll"
          />
          <span>全选</span>
        </div>
        <div class="option">
          <a @click="deleteAll">删除选中的商品</a>
          <!-- <a href="#none">移到我的关注</a>
        <a href="#none">清除下柜商品</a> -->
        </div>
        <div class="money-box">
          <div class="chosed">
            已选择 <span>{{ totalCount }}</span
            >件商品
          </div>
          <div class="sumprice">
            <em>总价（不含运费） ：</em>
            <i class="summoney">{{ totalPrice }}</i>
          </div>
          <div class="sumbtn">
            <a class="sum-btn" @click="$router.push('/trade')" target="_blank">结算</a>
          </div>
        </div>
      </div>
    </div>

    
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import throttle from "lodash/throttle";
import debounce from "lodash/debounce";
import { Notify } from "vant";
export default {
  name: "Cart",
  mounted() {
    this.getData();
  },
  data() {
    return {
      timer: null,
      count: 0,
    };
  },
  computed: {
    ...mapGetters(["cartInfo"]),
    isAll() {
      return (
        Array.isArray(this.cartInfo.cartInfoList) &&
        this.cartInfo.cartInfoList.length > 0 &&
        this.cartInfo.cartInfoList.every((item) => item.isChecked == 1)
      );
    },
    showShopList() {
      return (
        Array.isArray(this.cartInfo.cartInfoList) &&
        this.cartInfo.cartInfoList.length > 0
      );
    },
    cartInfoList() {
      return this.cartInfo.cartInfoList || [];
    },
    totalPrice() {
      return this.cartInfoList.reduce((pre, item) => {
        if (item.isChecked == 1) {
          pre = pre + item.skuNum * item.skuPrice;
        }
        return pre;
      }, 0);
    },
    totalCount() {
      return this.cartInfoList.reduce((pre, item) => {
        if (item.isChecked == 1) {
          pre = pre + item.skuNum;
        }
        return pre;
      }, 0);
    },
  },
  methods: {
    handleInput: debounce(async function (e, shop) {
      let num = e.target.value - 0;
      if (num <= 0 || isNaN(num)) {
        num = 0;
      }else{
        num = num-shop.skuNum
      }
      await this.$store.dispatch("addOrUpdateCart", {
        skuId: shop.skuId,
        skuNum: num,
      });
      this.getData()
    }, 500),
    async deleteItem(shop) {
      await this.$store.dispatch("deleteItem", shop.skuId);
      this.getData();
    },
    async deleteAll() {
      await this.$store.dispatch("deleteAll");
      this.getData();
    },
    minus: debounce(async function (shop) {
      // console.log(shop.skuId);
      // console.log(3333);
      if (shop.skuNum <= 1) {
        Notify({ type: "warning", message: "本商品1件起售" });
        return;
      }
      await this.$store.dispatch("addOrUpdateCart", {
        skuId: shop.skuId,
        skuNum: -1,
      });
      this.getData();
    }, 1000),
    add: function (shop) {
      shop.skuNum++;
      this.count++;
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(async () => {
        await this.$store.dispatch("addOrUpdateCart", {
          skuId: shop.skuId,
          skuNum: this.count,
        });
        this.count = 0;
        this.getData();
      }, 500);
      // debounce(async function (shop) {
      //   this.shop.skuNum++;
      //   await this.$store.dispatch("addOrUpdateCart", {
      //     skuId: shop.skuId,
      //     skuNum: 1,
      //   });
      //   this.getData();
      // }, 2000);
    },
    getData() {
      this.$store.dispatch("getCartList");
    },
    handleChecked: debounce(async function (e, skuId) {
      // console.log(e.target.checked);
      let checked = e.target.checked ? 1 : 0;
      // console.log(checked);
      await this.$store.dispatch("switchChecked", {
        skuId,
        isChecked: checked,
      });
      this.getData();
    }, 200),

    handleCheckAll: debounce(async function (e) {
      let checked = e.target.checked ? 1 : 0;
      await this.$store.dispatch("checkAll", checked);
      this.getData();
    }, 200),
  },
};
</script>

<style lang="less" scoped>
.header {
  font-size: 20px;
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  background: #eee;
  span {
    line-height: 45px;
  }
  div {
    display: flex;
  }
  i {
    vertical-align: middle;
    color: red;
    font-size: 25px;
    line-height: 45px;
    margin-right: 5px;
  }
  p {
    vertical-align: middle;
    font-size: 15px;
  }
}
.tips {
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
  margin-top: 15px;
}
.cartClear {
  color: #999;
  margin-top: 100px;
  i {
    font-size: 300px;
  }
  p {
    text-align: center;
    font-size: 25px;
  }
}
.cart-list-con1 {
  padding-top: 20px;
}
.cart-list-con7 {
  padding-top: 20px;
  margin-left: 35px;
}
.cart-list-con5 {
  padding-top: 20px;
  display: flex;
  margin-left: 10px;
}
.cart-list-con6 {
  padding-top: 20px;
  margin-left: 50px;
}
.cart-list-con2 {
  // padding-top: 20px;
  padding-left: 20px;
}
.cart {
  padding: 50px 0;
  font-size: 10px;
  width: 100%;
  margin: 0 auto;

  h4 {
    margin: 9px 0;
    font-size: 14px;
    line-height: 21px;
  }

  .cart-main {
    .cart-th {
      margin-top: 30px;
      background: red;
      border: 1px solid #ddd;
      padding: 10px;
      overflow: hidden;

      & > div {
        float: left;
      }

      .cart-th1 {
        width: 25%;

        input {
          vertical-align: middle;
        }

        span {
          vertical-align: middle;
        }
      }

      .cart-th2 {
        width: 25%;
      }

      .cart-th3,
      .cart-th4,
      .cart-th5,
      .cart-th6 {
        width: 12.5%;
      }
      .cart-th4 {
        margin-left: -20px;
      }
      .cart-th5 {
        margin: 0 0px 0 50px;
      }
    }

    .cart-body {
      margin: 15px 0;
      border: 1px solid #ddd;

      .cart-list {
        padding: 10px 0 10px 10px;
        border-bottom: 1px solid #ddd;
        overflow: hidden;

        & > li {
          float: left;
        }

        .cart-list-con1 {
          width: 4.1667%;
        }

        .cart-list-con2 {
          width: 25%;

          img {
            width: 82px;
            height: 82px;
            float: left;
          }

          .item-msg {
            float: left;
            width: 260px;
            margin: 0 10px;
            line-height: 18px;
          }
        }

        .cart-list-con3 {
          width: 20.8333%;

          .item-txt {
            text-align: center;
          }
        }

        .cart-list-con4 {
          width: 12.5%;
        }

        .cart-list-con5 {
          width: 12.5%;

          .mins {
            border: 1px solid #ddd;
            border-right: 0;
            float: left;
            color: #666;
            width: 6px;
            text-align: center;
            padding: 8px;
          }

          input {
            border: 1px solid #ddd;
            width: 40px;
            height: 33px;
            float: left;
            text-align: center;
            font-size: 14px;
          }

          .plus {
            border: 1px solid #ddd;
            border-left: 0;
            float: left;
            color: #666;
            width: 6px;
            text-align: center;
            padding: 8px;
          }
        }

        .cart-list-con6 {
          width: 12.5%;

          .sum {
            font-size: 16px;
          }
        }

        .cart-list-con7 {
          width: 12.5%;

          a {
            color: #666;
          }
        }
      }
    }
  }

  .cart-tool {
    overflow: hidden;
    border: 1px solid #ddd;

    .select-all {
      padding: 10px;
      overflow: hidden;
      float: left;

      span {
        vertical-align: middle;
      }

      input {
        vertical-align: middle;
      }
    }

    .option {
      padding: 10px;
      overflow: hidden;
      float: left;

      a {
        float: left;
        padding: 0 10px;
        color: #666;
      }
    }

    .money-box {
      float: right;

      .chosed {
        line-height: 26px;
        float: left;
        padding: 0 10px;
      }

      .sumprice {
        width: 200px;
        line-height: 22px;
        float: left;
        padding: 0 10px;

        .summoney {
          color: #c81623;
          font-size: 16px;
        }
      }

      .sumbtn {
        float: right;

        a {
          display: block;
          position: relative;
          width: 96px;
          height: 52px;
          line-height: 52px;
          color: #fff;
          text-align: center;
          font-size: 18px;
          font-family: "Microsoft YaHei";
          background: #e1251b;
          overflow: hidden;
        }
      }
    }
  }
}
</style>